<template>
  <div class="page">
    <div class="rank-bg"></div>
    <c-title text="排行榜"></c-title>
    <div class="rankink-page">
      <div class="ranking">
        <cranking-list :list="rankingList" :shop_log="shop_log"></cranking-list>
      </div>
      <div class="recommend">
        <c-list-item :listData="listData" :shop_log="shop_log"></c-list-item>
      </div>
      <c-add></c-add>
    </div>
  </div>
</template>

<script>
import groupCodeRankingController from './group_code_ranking_controller';

export default groupCodeRankingController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .page { 
    background-image: linear-gradient(var(--themeBaseColor) 0%,var(--themeBaseColor) 200px, #F5F5F5 246px, #F5F5F5 100%); 
    
    min-height: 100vh; 
    padding-bottom: 3.0625rem;
    position: relative;
  }
  .rank-bg {
    background:url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/group-code/rank-bg.png') center no-repeat;
    background-size:contain;
    position: absolute;
    left:0;
    top:0rem;
    width:100%;
    height: 13.375rem;
  }

  .ranking {
    margin-top: 6.25rem;
    .ranking_content {
      padding: 0.6875rem 0.75rem 0rem 0.75rem;
    }
  }

  .recommend {
    // margin-top: 21.008px;
    .wrapper {
      padding: 0.625rem 0.75rem 0.875rem 0.75rem;
    }
  }
</style>
